<script setup lang="ts">
import { getHouseAPI } from '@/services/House'
import { getAiResponse } from '@/services/DeepSeekAI'
import { ref } from 'vue'
import { onMounted } from 'vue'
import type { HouseItem } from '@/types/HouseItem'

const houseList = ref<HouseItem[]>([])
const picture = '/static/images/Null.png'
const res = uni.getSystemInfoSync()
console.log("res.windowBottom: ",res.windowBottom);
const isTriggered = ref(false)
const searchValue = ref('')

const p_value = ref()
const s_value = ref()
const h_value = ref()
const r_value = ref()

const p_range = ref([
  { value: 0, text: '从低到高' },
  { value: 1, text: '从高到低' },
])
const s_range = ref([
  { value: 0, text: '从低到高' },
  { value: 1, text: '从高到低' },
])
const h_range = ref([
  { value: 1, text: '1室' },
  { value: 2, text: '2室' },
  { value: 3, text: '3室' },
  { value: 4, text: '4室' },
  { value: 5, text: '4室以上' },
])
const r_range = ref([
  { value: 0, text: '整租' },
  { value: 1, text: '合租' },
])

const change = async () => {
  const res = await getHouseAPI(searchValue.value)
  houseList.value = res?.data
  let r_text = ''
  for (let item of r_range.value) {
    if (item.value === r_value.value) {
      r_text = item.text
      break
    }
  }
  if (p_value.value !== 0 && !p_value.value) {
    if (s_value.value === 0) {
      houseList.value.sort((a, b) => a.size - b.size)
    } else if (s_value.value === 1) {
      houseList.value.sort((a, b) => b.size - a.size)
    }
  } else if (s_value.value !== 0 && !s_value.value) {
    if (p_value.value === 0) {
      houseList.value.sort((a, b) => a.price - b.price)
    } else if (p_value.value === 1) {
      houseList.value.sort((a, b) => b.price - a.price)
    }
  } else {
    if (s_value.value === 0 && p_value.value === 0) {
      houseList.value.sort((a, b) => {
        const priceDifference = a.price - b.price
        if (priceDifference !== 0) {
          return priceDifference
        } else {
          return a.size - b.size
        }
      })
    } else if (s_value.value === 1 && p_value.value === 1) {
      houseList.value.sort((a, b) => {
        const priceDifference = b.price - a.price
        if (priceDifference !== 0) {
          return priceDifference
        } else {
          return b.size - a.size
        }
      })
    } else if (s_value.value === 0 && p_value.value === 1) {
      houseList.value.sort((a, b) => {
        const priceDifference = b.price - a.price
        if (priceDifference !== 0) {
          return priceDifference
        } else {
          return a.size - b.size
        }
      })
    } else if (s_value.value === 1 && p_value.value === 0) {
      houseList.value.sort((a, b) => {
        const priceDifference = a.price - b.price
        if (priceDifference !== 0) {
          return priceDifference
        } else {
          return b.size - a.size
        }
      })
    }
  }
  if (h_value.value) {
    const extractedNumber = ref<number | null>(null)

    //要求item.huxing的字符串包含h_value.value
    houseList.value = houseList.value.filter((item) => {
      const match = item.huxing?.match(/(\d+)室/)
      console.log('match:', match)
      if (!!match) {
        extractedNumber.value = parseInt(match[1], 10)
        console.log('extractedNumber:', extractedNumber.value)
        if (h_value.value === 5) {
          return !!extractedNumber.value && extractedNumber.value > 4
        } else {
          return extractedNumber.value === h_value.value
        }
      } else {
        return false
      }
    })
    //用正则表达式提取数字，例如"3室"提取出3，把提取出的数字赋给一个变量
  }
  if (r_text) {
    houseList.value = houseList.value.filter((item) => item.kinds === r_text)
  }
  console.log('s_value.value:', s_value.value)
  console.log('p_value.value:', p_value.value)
  console.log('h_text:', h_value.value)
  console.log('r_text:', r_text)
}
console.log(res.windowWidth)
onMounted(async () => {
  const res = await getHouseAPI()
  console.log('res:', res)
  houseList.value = res?.data
})
const onRefresherrefresh = async () => {
  isTriggered.value = true
  s_value.value = undefined
  p_value.value = undefined
  h_value.value = undefined
  r_value.value = undefined
  const res = await getHouseAPI()
  console.log('res:', res)
  houseList.value = res?.data
  console.log('刷新')
  isTriggered.value = false
}
const clear = async () => {
  s_value.value = undefined
  p_value.value = undefined
  h_value.value = undefined
  r_value.value = undefined
  const res = await getHouseAPI()
  houseList.value = res?.data
}
const NavigateTo = (id: number) => {
  uni.navigateTo({
    url: `/pages/House?id=${id}`,
  })
}
const handleIconClick = () => {
  uni.navigateTo({
    url: '/pages/chatBot',
  })
}
</script>
<template >
  <div class="fixed">
  <uni-search-bar
    @confirm="change"
    @clear="clear"
    @cancel="clear"
    :focus="true"
    v-model="searchValue"
    placeholder="房屋名称"
    radius="30"
  >
  </uni-search-bar>
  <div class="container">
    <uni-data-select
      class="item"
      v-model="p_value"
      :localdata="p_range"
      @change="change"
      placeholder="价格"
    ></uni-data-select>
    <uni-data-select
      class="item"
      v-model="s_value"
      :localdata="s_range"
      @change="change"
      placeholder="面积"
    ></uni-data-select>
    <uni-data-select
      class="item"
      v-model="h_value"
      :localdata="h_range"
      @change="change"
      placeholder="户型"
    ></uni-data-select>
    <uni-data-select
      class="item"
      v-model="r_value"
      :localdata="r_range"
      @change="change"
      placeholder="租住"
    ></uni-data-select>
  </div>
    <div class="floating-icon" @click="handleIconClick">
      <image src="/static/images/chatBot.png" mode="widthFix" class="icon"></image>
    </div>
  </div>
  <scroll-view
    refresher-enabled
    @refresherrefresh="onRefresherrefresh"
    :refresher-triggered="isTriggered"
    class="scroll-view"
  >
    <uni-list>
      <uni-list-item
        v-for="(item, index) in houseList"
        :key="index"
        :clickable="true"
        @click="NavigateTo(item.id)"
      >
        <template v-slot:header>
          <view class="slot-box">
            <image
              class="slot-image"
              :style="{ width: res.windowWidth * 0.4 + 'px' }"
              :src="item.pictures[0] || picture"
              mode="aspectFit"
            ></image>
          </view>
        </template>
        <template v-slot:body>
          <view class="slot-box">
            <div class="listing" :style="{ minWidth: res.windowWidth * 0.6 - 30 + 'px' }">
              <p class="title">{{ item.name }} {{ item.huxing }}</p>
              <p class="subtitle">{{ item.zhuangxiu }} {{ item.status }} {{ item.louceng }}</p>
              <div class="price-container">
                <span class="price">{{ item.price }}元/月</span>
                <span class="area">{{ item.size }}m<text class="sup-text">2</text></span>
              </div>
            </div>
          </view>
        </template>
        <template v-slot:footer> </template>
      </uni-list-item>
    </uni-list>
  </scroll-view>
  <view class="bottom-space"></view>
</template>

<style lang="scss">
.scroll-view{
  padding-top:92px;
}
.fixed{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background-color: white;
}
.bottom-space{

  bottom: 0;
  left: 0;
  width: 100%;
  height:5vh;

}
.floating-icon {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: #007AFF;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.icon {
  width: 30px;
  height: 30px;
}
.container {
  display: flex;
  justify-content: center;
}
.item {
  flex: 1;
  text-align: center;
}
.search-result {
  padding-top: 10px;
  padding-bottom: 20px;
  text-align: center;
}

.search-result-text {
  text-align: center;
  font-size: 14px;
  color: #666;
}

.example-body {
  /* #ifndef APP-NVUE */
  display: block;
  /* #endif */
  padding: 0px;
}

.uni-mt-10 {
  margin-top: 10px;
}
.slot-box {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.slot-image {
  display: block;
  margin-right: 10px;
  height: 100px;
}

.listing {
  display: flex;
  flex-direction: column;
}
.title {
  font-size: 20px;
  font-weight: bold;
}

.subtitle {
  font-size: 10px;
  color: gray;
  margin-top: 10px;
}

.price-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px; /* Adjust spacing between lines */
}

.price {
  font-size: 20px;
  color: red;
}

.area {
  font-size: 20px;
  color: gray;
}

.sup-text {
  font-size: 0.75em; /* 调整上标的大小 */
  vertical-align: super; /* 将其对齐到上标 */
}

</style>
